<template>
	<view class="module flex_ZC">
		<NavTitle :title="title" :backgroundColor='backgroundColor' @leftClick="leftClick"></NavTitle>


		<view class="shop_box flex_ld pd46">
			<text class="f32 c3  fw7">店铺保证金</text>
			<view class="flex_c fw7">
				<text class="f30 c3">￥{{earnest_money}}</text>
			</view>
		</view>
		<view class="box">
			<view class="list">
				<u-parse :content="article"></u-parse>
			</view>
		</view>
		<view class="empty3"></view>
		<view class="btns pay_box">
			<!-- <view class="information ">
				<view class="zhengce " @click="toggleAgree">
					<image :src="baseUrl +'/static/icon/i_wxz.png'" mode="aspectFill" v-if="!selectStatus"></image>
					<image :src="baseUrl +'/static/icon/i_xz.png'" mode="aspectFill" v-if="selectStatus"></image>
				</view>
				<view class="information_box">
					<text>同意</text>
					<text class="underline clause" @click.stop="serviceAgreements">《福叠猫店铺保证金用途及使用规范》</text>
				</view>
			</view> -->
			<view class="shop_btn flex_c" @click="$u.debounce(toPay, 300)">
				<text class="f30 c3">支付保证金</text>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		setting
	} from "../../api/other.js"
	export default {
		data() {
			return {
				title: "支付保证金",
				baseUrl: this.$imageBaseUrl,
				backgroundColor: '',
				selectStatus: false, //选中状态
				article: '数据加载中...' ,//富文本内容
				isfrom:"",
				zhifuList: [
					{
						id: 2,
						name: '支付宝支付',
						state: true,
						img: 'https://images.fudiemall.com/static/icon/alipay.png',
						pay_way: 'alipay'
					},
				],
				zhifuList2: [{
						id: 1,
						name: '微信支付',
						state: true,
						img: 'https://images.fudiemall.com/static/icon/i_wxPay.png',
						pay_way: 'wxpay'
					},
				
				],
				pay_way:"",
				earnest_money:""
			}
		},
		onLoad(options) {
			if(options.money){
				console.log(options.money);
				this.earnest_money = options.money
			}
			this.getrule()
		},
		// 页面滚动
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 20) {
				this.backgroundColor = '#ffffff';
			} else {
				this.backgroundColor = '';
			}
			// console.log("滚动距离为：" + e.scrollTop);
		},
		methods: {
			toPay(){
				uni.navigateTo({
					url: '/pagesMy/cloudCat/paymentCenter?totalPrice=' + this.earnest_money + "&type=3"
				})
			},
			getrule() {
				setting().then(res => {
					if (res.code == 1) {
						this.article = res.data.agreement.deposit_agreement
					}
				})
			},
			// 协议
			toggleAgree() {
				this.selectStatus = !this.selectStatus
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
		}
	}
</script>

<style scoped>
	.module {
		width: 750rpx;
		margin: 0 auto;
	}

	.custom_box {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		padding-bottom: 10rpx;
		opacity: 1;
	}

	.indexbg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 260rpx;
		/* background: pink; */
		z-index: 7;
	}

	.custom_nav {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		font-size: 36rpx;
		z-index: 9;
		color: #FFFFFF;

	}

	.goback {
		position: absolute;
		left: 30rpx;
		text-align: center;
		width: 40rpx;
		height: 40rpx;
	}

	.describe {
		width: 690rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		color: #333333;
		text-decoration-line: underline;
		margin: 24rpx 0;
	}

	.mar24 {
		margin: 24rpx;
	}

	.shop_box {
		width: 690rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 24rpx 0;
	}

	.shop_btn {
		width: 638rpx;
		height: 76rpx;
		background: #FFCC28;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 26rpx auto;
	}


	.pd46 {
		padding: 46rpx 24rpx;
	}

	.information {
		display: flex;
		justify-content: center;
		width: 690rpx;
		margin-top: 20rpx;
	}

	.information_box {
		margin-left: 14rpx;

	}

	.information_box>text {
		color: #999999;
		font-size: 24rpx;
	}

	.clause {
		color: #FFC300 !important;
	}

	.zhengce>image {
		width: 32rpx;
		height: 32rpx;
		margin-top: 10rpx;
	}

	.box {
		width: 750rpx;
		height: 100vh;
		background: #F7F7F7;
	}

	.box>text {
		margin: 40rpx 0 20rpx;
	}

	.list {
		margin-top: 40rpx;
		width: 700rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #333333;
	}

	.s {
		color: #333;
		opacity: 0.7;
	}

	.pay_box {
		width: 750rpx;
		background-color: #ffffff;
		z-index: 6;
	}

	.btns {
		position: fixed;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		/* width: 690rpx;
			height: 150rpx; */
		background: #f8f8f8;
	}
</style>